<script setup>
import { reactive, ref } from 'vue'
import { updateStockShortageApplication } from '@/service/stock-shortage-application.js'
import { ElMessage } from 'element-plus'
const showModal = ref(false)
const applicationForm = reactive({
  id: null,
  productName: null,
  brandName: null,
  productSpecificationName: null,
  status: 0,
  productImages: [],
})
const emits = defineEmits(['update'])
async function onTapUpdateButton() {
  console.log(applicationForm)
  const params = {}
  params.id = applicationForm.id
  params.productSpecificationName = applicationForm.productSpecificationName
  params.brandName = applicationForm.brandName
  params.productName = applicationForm.productName
  params.status = applicationForm.status
  await updateStockShortageApplication(params)
  ElMessage.success('更新成功！')
  emits('update')
  showModal.value = false
}
defineExpose({
  showModal,
  applicationForm,
})
</script>

<template>
  <el-dialog v-model="showModal" title="查看缺货申请" width="500">
    <el-form :model="applicationForm" label-position="top">
      <el-form-item label="商品名称:">
        <el-input v-model="applicationForm.productName" placeholder="请输入商品名称(必填)"></el-input>
      </el-form-item>
      <el-form-item label="规格型号:">
        <el-input v-model="applicationForm.productSpecificationName" placeholder="请输入规格型号"></el-input>
      </el-form-item>
      <el-form-item label="品牌名称:">
        <el-input v-model="applicationForm.brandName" placeholder="请输入品牌名称"></el-input>
      </el-form-item>
      <el-form-item v-if="applicationForm.productImages && applicationForm.productImages.length" label="商品图片:">
        <div class="image-list">
          <div v-for="(image, index) in applicationForm.productImages" :key="image" class="image">
            <el-image
              :initial-index="index"
              :max-scale="3"
              :min-scale="0.2"
              :preview-src-list="applicationForm.productImages"
              :src="image"
              show-progress
              style="width: 60px; height: 60px"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="处理状态:">
        <el-select v-model="applicationForm.status" placeholder="Select" style="width: 240px">
          <el-option :value="0" label="未处理" />
          <el-option :value="1" label="已处理" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onTapUpdateButton">更新</el-button>
        <el-button type="default" @click="showModal = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.image-list {
  display: flex;
  gap: 20px; // 替代 margin-right，更规范
  .image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden; // 关键：裁剪超出父容器圆角的内容
    // 深度选择器穿透 el-image 内部元素（scoped 样式必需）
    :deep(.el-image) {
      width: 100%;
      height: 100%;
    }
    // 给实际的 img 标签设置圆角（继承父容器）
    :deep(.el-image) img {
      border-radius: inherit;
    }
  }
}
</style>
